<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      class="frominfo"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <div class="from-item">
        <el-form-item label="任务编号" prop="taskId">
          <el-input
            v-model="queryParams.wcTimedTasks.taskId"
            type="number"
            @keyup.enter.native="handleQuery"
            placeholder="请输入任务编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="创建人" v-if="!common" prop="createBy">
          <el-input
            v-model="queryParams.wcTimedTasks.createBy"
            @keyup.enter.native="handleQuery"
            placeholder="请输入创建人"
            clearable
          />
        </el-form-item>
        <el-form-item label="执行时间" prop="executeTime">
          <el-date-picker
            v-model="chatTime"
            style="width: 240px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="执行周期" prop="executeCycle">
          <el-select
            v-model="queryParams.wcTimedTasks.executeCycle"
            @change="cycleChang"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="dict in dict.type.sys_cycle_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="chatTimes"
            style="width: 240px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="消息类型 " prop="msgType">
          <el-select
            v-model="queryParams.wcTimedTasks.msgType"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="dict in dict.type.sys_messagetype_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="from-Btn">
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </div>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          class="add-btn"
          plain
          icon="el-icon-folder-add"
          size="mini"
          @click="handleAdd"
          >添加任务</el-button
        >
      </el-col>
    </el-row>

    <div class="line-state">
      <div
        class="state-box"
        @click="setState(item.value)"
        :class="
          state == item.value
            ? index == 0
              ? 'select frist-border'
              : index == 2
              ? 'select end-border'
              : 'select'
            : index == 0
            ? 'frist-border'
            : index == 2
            ? 'end-border'
            : ''
        "
        :style="
          index == 1
            ? 'border-right: 1px solid #d1e5ff;border-left: 1px solid #d1e5ff;'
            : ''
        "
        v-for="(item, index) in finishState"
        :key="index"
      >
        {{ item.label }}
      </div>
    </div>

    <el-table
      v-loading="loading"
      :data="wcTimedTasksList"
      :header-cell-style="{ background: '#fcfcfd', color: '#000' }"
      :border="false"
    >
      <el-table-column
        label="任务编号"
        prop="taskId"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
        :show-overflow-tooltip="true"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="执行周期 "
        prop="executeCycle"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <dict-tag
            v-if="
              scope.row.executeCycle != '' && scope.row.executeCycle != null
            "
            :options="dict.type.sys_cycle_type"
            :value="scope.row.executeCycle"
          />
          <span v-else>仅一次</span>
        </template>
      </el-table-column>
      <el-table-column
        label="消息类型 "
        prop="msgType"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_messagetype_type"
            :value="scope.row.msgType"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="执行时间"
        prop="executeTime"
        align="center"
        :show-overflow-tooltip="true"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.executeTime, "{y}-{m}-{d} {h}:{i}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建人"
        v-if="state == 0"
        prop="createBy"
        align="center"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="执行进度"
        v-if="state != 0"
        prop="finishNum"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope" v-if="state != 0">
          <span
            >{{ scope.row.finishNum }}/{{
              scope.row.executeNum == null ? 0 : scope.row.executeNum
            }}</span
          >
        </template>
      </el-table-column>

      <el-table-column
        label="执行结果"
        v-if="state == 2"
        prop="executionResult"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            :style="
              scope.row.finishState == 2
                ? 'color:#97c05a'
                : scope.row.finishState == 3
                ? 'color:#c8544b'
                : ''
            "
            >{{
              scope.row.finishState == 2
                ? "任务已完成"
                : scope.row.finishState == 3
                ? "任务已取消"
                : ""
            }}</span
          >
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="120"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            class="btn-setup"
            icon="el-icon-circle-close"
            v-if="state != 2"
            @click="handleUpdate(scope.row)"
            >取消</el-button
          >
          <el-button
            type="warning"
            class="btn-setup"
            icon="el-icon-document"
            size="mini"
            @click="golink('/timed/detial', scope.row, 'timedDetial')"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改定时任务信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <div class="theSteps">
        <el-steps :active="active" finish-status="success">
          <el-step title="选择好友"></el-step>
          <el-step title="设定任务内容"></el-step>
          <el-step title="预览群发"></el-step>
        </el-steps>
      </div>

      <selfriend
        v-show="active == 1"
        ref="friend"
        style="height: 500px"
        :checkedIds="ids"
        :show="false"
        @changeSelect="changeSelect"
      ></selfriend>

      <el-form
        v-show="active == 2"
        :model="queryTwo"
        label-width="100px"
        style="padding: 20px 0"
      >
        <el-form-item label="任务名称" prop="taskName">
          <el-input
            v-model="queryTwo.wcTimedTasks.taskName"
            @keyup.enter.native="handleQuery"
            style="width: 300px"
            placeholder="请输入任务名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="执行类型" prop="executionType">
          <el-radio-group v-model="queryTwo.wcTimedTasks.executionType">
            <el-radio :label="1">立即执行</el-radio>
            <el-radio :label="2">定时执行</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="定时"
          v-if="queryTwo.wcTimedTasks.executionType == 2"
          prop="executeCycle"
        >
          <div style="display: flex">
            <el-select
              style="width: 90px; margin-right: 10px"
              v-model="queryTwo.wcTimedTasks.executeCycle"
              placeholder="请选择"
              @change="selectItem"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_cycle_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
            <el-time-picker
              v-if="
                queryTwo.wcTimedTasks.executeCycle == 1 ||
                queryTwo.wcTimedTasks.executeCycle == null ||
                queryTwo.wcTimedTasks.executeCycle == ''
              "
              is-range
              v-model="chatTimee"
              value-format="HH:mm:ss"
              range-separator="至"
              :picker-options="{
                selectableRange: ['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'],
              }"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
            <div
              v-if="queryTwo.wcTimedTasks.executeCycle == 2"
              style="display: flex"
            >
              <el-select
                style="width: 105px"
                v-model="weekIdx"
                placeholder="请选择周"
                clearable
              >
                <el-option
                  v-for="(dict, index) in daysOfWeek"
                  :key="index"
                  :label="dict"
                  :value="index + 1"
                />
              </el-select>
              <el-time-picker
                style="width: 200px"
                is-range
                v-model="chatTimee"
                value-format="HH:mm:ss"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </div>
            <div
              v-if="queryTwo.wcTimedTasks.executeCycle == 3"
              style="display: flex"
            >
              <el-date-picker
                style="width: 100px"
                v-model="checkDay"
                type="date"
                format="dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOption"
                placeholder="选择日"
              >
              </el-date-picker>
              <el-time-picker
                style="width: 200px"
                is-range
                v-model="chatTimee"
                value-format="HH:mm:ss"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </div>
            <div
              v-if="queryTwo.wcTimedTasks.executeCycle == 4"
              style="display: flex"
            >
              <el-date-picker
                style="width: 150px"
                v-model="checkDay"
                type="date"
                format="MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                placeholder="选择日期"
              >
              </el-date-picker>
              <el-time-picker
                style="width: 200px"
                is-range
                v-model="chatTimee"
                value-format="HH:mm:ss"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="消息发送间隔" prop="intervalTime">
          <el-select
            v-model="queryTwo.wcTimedTasks.intervalTime"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="dict in dict.type.sys_time_type"
              :key="dict.value"
              :label="dict.label + 'ms'"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="消息类型" prop="msgType">
          <el-select
            v-model="queryTwo.wcTimedTasks.msgType"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="dict in dict.type.sys_messagetype_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发送内容" prop="wcTaskDetailsList">
          <editor
            :action="uploadUrl"
            style="height: 180px; overflow-y: hidden"
            v-model="queryTwo.richText"
          ></editor>

          <!-- <el-autocomplete
            class="inline-input"
            v-model="state1"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
            v-if="autocompleteShow"
          ></el-autocomplete> -->
          <!-- <div style="display: flex;flex-direction: column;">
              <div class="msg-list" v-for="item,index in msgInfo" :key="index">
                <span v-if="item.contentType=='1'">
                  {{ item.messageContent }}
                </span>
                <image-preview v-if="item.contentType=='2'" :src="item.messageContent" :width="100" :height="100" />
                <span v-if="item.contentType=='3'"><i class="el-icon-document"></i>{{ item.name }}</span>
              </div>
              <el-radio-group v-model="msgType" style="margin-bottom:20px;margin-top: 10px;">
                <el-radio :label="'1'">文字</el-radio>
                <el-radio :label="'2'">图片</el-radio>
                <el-radio :label="'3'">文件</el-radio>
              </el-radio-group>
              <el-autocomplete v-if="msgType=='1'"
                type="textarea"
                rows="4"
                :maxlength="460"
                class="my-autocomplete"
                v-model="msgContent"
                ref="autocomplete"
                :fetch-suggestions="querySearch"
                placeholder="请输入或选择内容"
                @select="handleSelect">
                <template slot-scope="{ item }">
                  <div class="name">{{ item.label }}</div>
                </template>
              </el-autocomplete>
              <div v-if="msgType!='1'" class="add-upload">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :headers="headers"
                  :action="uploadUrl"
                  :disabled="isUploading"
                  :before-upload="handleBeforeUpload"
                  :on-progress="handleFileUploadProgress"
                  :on-success="handleFileSuccess"
                  :auto-upload="true">
                  <el-button size="small" type="primary" icon="el-icon-upload2">{{ msgType=='2'?'上传图片':'上传文件' }}</el-button>
                </el-upload>
              </div>
              <div class="add-msg" @click="addMsg"><i class="el-icon-plus"></i></div>
          </div> -->
        </el-form-item>
        <el-select
          placeholder="请选择类型"
          v-model="paramsValue"
          @change="handleSelChange"
        >
          <el-option
            v-for="dict in paramsList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          >
          </el-option>
        </el-select>
      </el-form>

      <div v-if="active == 3" style="display: flex; flex-direction: column">
        <el-form
          size="small"
          :inline="true"
          label-width="88px"
          style="margin-bottom: 0"
        >
          <div class="from-item" style="color: #8c8c8c">
            <el-form-item label="任务名称:" prop="taskId">
              <span>{{ queryTwo.wcTimedTasks.taskName }}</span>
            </el-form-item>
            <el-form-item label="发送类型:" prop="createBy">
              <div style="display: flex">
                {{
                  queryTwo.wcTimedTasks.executionType == 1
                    ? "直接发送"
                    : "定时发送"
                }}
                <div
                  style="display: flex"
                  v-if="queryTwo.wcTimedTasks.executionType == 2"
                >
                  -
                  <dict-tag
                    :options="dict.type.sys_cycle_type"
                    :value="queryTwo.wcTimedTasks.executeCycle"
                  />
                </div>
              </div>
            </el-form-item>
          </div>
        </el-form>

        <div style="border: 1px solid #8080802b">
          <el-table
            :data="selection"
            :header-cell-style="{ background: '#fcfcfd', color: '#000' }"
            :border="false"
            style="height: 200px; overflow-y: scroll"
          >
            <el-table-column
              label="微信名称"
              prop="wcUserName"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="微信备注"
              prop="wcNoteName"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="是否在网"
              prop="interState"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.sys_network_status"
                  :value="scope.row.interState"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="标签"
              prop="lableName"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="微信所属人员"
              prop="userName"
              align="center"
              :show-overflow-tooltip="true"
            />
          </el-table>
          <span style="line-height: 30px; margin-left: 20px"
            >已选{{ ids.length }}</span
          >
        </div>

        <span style="line-height: 40px">发送内容：</span>
        <div
          style="padding: 20px; border: 1px solid #8080802b; line-height: 25px"
        >
          <div
            class="msg-list"
            v-for="(item, index) in queryTwo.wcTaskDetailsList"
            :key="index"
          >
            <span v-if="item.contentType == '1'">
              {{ item.messageContent }}
            </span>
            <image-preview
              v-if="item.contentType == '2'"
              :src="item.messageContent"
              :width="100"
              :height="100"
            />
            <span v-if="item.contentType == '3'"
              ><i class="el-icon-document"></i>{{ item.name }}</span
            >
          </div>
        </div>
      </div>

      <el-button class="btn-up" v-if="active != 1" @click="topUp"
        >上一步</el-button
      >
      <el-button class="btn-up" v-if="active != 3" @click="next"
        >下一步</el-button
      >
      <el-button class="btn-up" v-if="active == 3" @click="submitInfo"
        >提交</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import selfriend from "../components/select_friend.vue";
import { adminReadParams } from "@/api/system/params";
export default {
  dicts: [
    "sys_cycle_type",
    "sys_messagetype_type",
    "sys_time_type",
    "sys_network_status",
  ],
  components: {
    selfriend,
  },
  data() {
    return {
      paramsList: [],
      paramsValue: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      selection: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 定时任务信息表格数据
      wcTimedTasksList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      chatTime: [],
      chatTimes: [],
      chatTimee: ["", ""],
      daysOfWeek: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
      //消息内容信息
      msgType: "1",
      msgContent: "",
      fileSize: 5,
      fileType: ["png", "jpg", "jpeg"],
      fileList: [],
      msgInfo: [],
      startTime: "10:30:00",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wcTimedTasks: {
          taskId: null, //任务id
          taskType: 2, //任务类型 (0:添加好友任务 1：定时任务  2:群发任务)
          msgType: null,
          executionType: 1, //执行类型不能为空
          executeCycle: null, //执行周期  业务字典（1：每天 2：每周 3：每月 4：每年）
          createBy: null, //创建人
        },
        finishState: 0,
        startExecuteTime: null,
        endExecuteTime: null,
        startCreateTime: null,
        endCreateTime: null,
      },
      state: 0,
      active: 1,
      common: false,
      finishState: [
        { label: "任务待执行", value: 0 },
        { label: "任务执行中", value: 1 },
        { label: "任务执行结束", value: 2 },
      ],
      queryTwo: {
        wcUserInfo: { id: "", name: "" },
        wcFriendInfoList: [], //群发好友列表
        // wcTaskDetailsList: [], //信息内容
        richText: "", //富文本内容
        wcTimedTasks: {
          taskType: 2, //任务类型 0:添加好友任务 1：定时任务  2:群发任务)
          msgType: null, //信息类型: 0:天气 1:新闻 2:心情
          createTime: null,
          executionType: 1, //执行类型 1:立即执行, 2:定时执行
          executeTime: null, //执行时间
          executeCycle: null, //执行周期
          intervalTime: null, //执行间隔时间
          taskName: null, //任务名称
          satartDate: null, //开始执行时间
          endDate: null, //结束执行时间
        },
      },
      weekIdx: null,
      checkDay: null,
      headers: { Authorization: "Bearer " + getToken() },
      isUploading: false,
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      pickerOptions: {
        disabledDate(time) {
          return time.getFullYear() !== new Date().getFullYear();
        },
      },
      pickerOption: {
        disabledDate(time) {
          // 获取当前月份的第一天和最后一天
          const start = new Date();
          const end = new Date();
          start.setDate(1);
          end.setMonth(end.getMonth() + 1);
          end.setDate(0);

          // 如果当前日期不在本月范围内，则禁用
          return (
            time.getTime() < start.getTime() || time.getTime() > end.getTime()
          );
        },
      },
    };
  },
  mounted() {
    if (this.$store.state.user.roles.includes("common")) {
      this.common = true;
    }
    this.getList();
    this.getPage();
    this.getParamsList();
  },
  methods: {
    handleType(num) {
      switch (num) {
        case 0:
          return "其他";
        case 1:
          return "文字";
        case 2:
          return "链接";
        case 3:
          return "图片";
        case 4:
          return "文件";
      }
    },
    getParamsList() {
      adminReadParams().then((res) => {
        this.paramsList = res.data.records.map((item) => {
          return {
            label: item.variableName + "-" + this.handleType(item.variableType),
            value: item.variableName,
          };
        });
      });
    },
    handleSelChange(val) {
      this.queryTwo.richText += "#" + val + "#";
      this.queryTwo.richText = this.template(this.queryTwo.richText, val);
      this.queryTwo.richText = this.queryTwo.richText.replace("undefined", "");
      this.paramsValue = "";
    },
    template(tem, name) {
      const reg = /\<\/p>\#(\S+)\#/;
      if (reg.test(tem)) {
        const key = reg.exec(tem)[1]; // 查找当前模板⾥第⼀个模板字符串的字段
        tem = tem.replace(reg, `#${name}#</p >`); // 将第⼀个模板字符串渲染
        return this.template(tem, name);
      }
      return tem;
    },
    selectItem() {
      this.weekIdx = null;
      this.checkDay = null;
    },
    getWeekDay(targetNum) {
      const currentDate = new Date();
      const curDayInWeek = currentDate.getDay();
      const offset = targetNum - curDayInWeek;
      const timestamp = currentDate.getTime() + offset * 24 * 3600 * 1000;
      const targetDate = new Date(timestamp);
      const year = targetDate.getFullYear(); // 年份
      let month = targetDate.getMonth() + 1; // 月份
      month = month < 10 ? "0" + month : month.toString(); // 若月份小于10则补个0
      let day = targetDate.getDate(); // 日期
      day = day < 10 ? "0" + day : day.toString(); // 若日期小于10则补个0
      return year + `-` + month + `-` + day + ` `;
    },
    getDaysInMonth() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      return new Date(year, month, 0).getDate();
    },
    golink(url, param, name) {
      this.$router
        .push({ path: url, name, query: { info: JSON.stringify(param) } })
        .catch(() => {});
    },
    setState(id) {
      this.state = id;
      this.queryParams.finishState = id;
      this.getList();
    },
    cycleChang() {
      if (
        this.queryParams.executeCycle != null &&
        this.queryParams.executeCycle != ""
      ) {
        this.queryParams.executionType = 2;
      } else {
        this.queryParams.executionType = 1;
      }
    },
    changeSelect(selection) {
      //console.log(selection)
      this.ids = selection.map((item) => item.id);
      this.selection = selection;
      this.queryTwo.wcFriendInfoList = selection.map((item) => {
        var newItem = {
          wcId: item.wcId, //微信用户id
          assistId: item.assistId, //助手名称
          wcName: item.wcName, //助手id
          wcUserId: item.wcUserId, //好友微信ID
          wcUserName: item.wcUserName, //好友微信名称
          wcUserNumber: item.wcUserNumber, //好友微信号
          wcNoteName: item.wcNoteName, //微信备注名
          wcUserRegion: item.wcUserRegion, //好友区域
        };
        return newItem;
      });
    },
    /** 查询定时任务信息列表 */
    getList() {
      this.loading = true;
      listWcTimedTasks(this.queryParams).then((res) => {
        if (res["success"]) {
          const dt = res["data"];
          this.total = dt["total"];
          this.wcTimedTasksList = dt["records"];
        }
        this.loading = false;
      });
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    },
    getPage() {
      page({ pageNum: 1, pageSize: 999, termType: 2 }).then((res) => {
        if (res["success"]) {
          const dt = res["data"];
          //this.total = dt['total'];
          this.pageList = dt["records"].map((key) => {
            return { label: key.content, value: key.termId };
          });
        }
      });
    },
    querySearch(queryString, cb) {
      var restaurants = this.pageList;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      this.msgContent = item.label;
    },
    topUp() {
      this.active -= 1;
    },
    next() {
      // if (this.active == 1) {
      //   if (this.ids == null || this.ids == "") {
      //     this.$message({
      //       message: "请选择好友！",
      //       type: "warning",
      //     });
      //     return;
      //   }
      // } else if (this.active == 2) {
      //   if (this.msgContent != "" && this.msgContent != null) {
      //     this.msgInfo.push({
      //       contentType: "1",
      //       messageContent: this.msgContent,
      //     });
      //     this.msgType = "1";
      //     this.msgContent = "";
      //   }
      //   this.queryTwo.wcTaskDetailsList = this.msgInfo;
      //   if (
      //     this.queryTwo.wcTimedTasks.taskName == null ||
      //     this.queryTwo.wcTimedTasks.taskName == ""
      //   ) {
      //     this.$message({
      //       message: "请输入任务名称！",
      //       type: "warning",
      //     });
      //     return;
      //   }
      //   if (this.queryTwo.wcTimedTasks.executionType == 1) {
      //     var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
      //     this.queryTwo.wcTimedTasks.createTime = currentTime;
      //     this.queryTwo.wcTimedTasks.executeTime = currentTime;
      //     this.queryTwo.wcTimedTasks.satartDate = null;
      //     this.queryTwo.wcTimedTasks.endDate = null;
      //   } else {
      //     if (
      //       this.queryTwo.wcTimedTasks.executeCycle == null ||
      //       this.queryTwo.wcTimedTasks.executeCycle == ""
      //     ) {
      //       this.$message({
      //         message: "请选择定时类型！",
      //         type: "warning",
      //       });
      //       return;
      //     }
      //     if (this.queryTwo.wcTimedTasks.executeCycle == 1) {
      //       if (this.chatTimee != null && this.chatTimee != "") {
      //         var currentDay = moment().format("YYYY-MM-DD");
      //         var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
      //         this.queryTwo.wcTimedTasks.satartDate =
      //           currentDay + " " + this.chatTimee[0];
      //         this.queryTwo.wcTimedTasks.endDate =
      //           currentDay + " " + this.chatTimee[1];
      //         const time1 = moment(currentTime);
      //         const time2 = moment(this.queryTwo.wcTimedTasks.satartDate);
      //         this.queryTwo.wcTimedTasks.createTime = currentTime;
      //         if (time1 > time2) {
      //           this.queryTwo.wcTimedTasks.executeTime = moment(
      //             this.queryTwo.wcTimedTasks.satartDate
      //           )
      //             .add(1, "days")
      //             .format("YYYY-MM-DD HH:mm:ss");
      //         } else {
      //           this.queryTwo.wcTimedTasks.executeTime =
      //             this.queryTwo.wcTimedTasks.satartDate;
      //         }
      //       } else {
      //         this.$message({
      //           message: "请选择定时执行时间！",
      //           type: "warning",
      //         });
      //         return;
      //       }
      //     }
      //     if (this.queryTwo.wcTimedTasks.executeCycle == 2) {
      //       if (
      //         this.chatTimee != null &&
      //         this.chatTimee != "" &&
      //         this.weekIdx != null
      //       ) {
      //         var currentDay = this.getWeekDay(this.weekIdx);
      //         var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
      //         this.queryTwo.wcTimedTasks.satartDate =
      //           currentDay + this.chatTimee[0];
      //         this.queryTwo.wcTimedTasks.endDate =
      //           currentDay + this.chatTimee[1];
      //         const time1 = new Date(currentTime).getTime();
      //         const time2 = new Date(
      //           this.queryTwo.wcTimedTasks.satartDate
      //         ).getTime();
      //         this.queryTwo.wcTimedTasks.createTime = currentTime;
      //         if (time1 > time2) {
      //           this.queryTwo.wcTimedTasks.executeTime = moment(
      //             this.queryTwo.wcTimedTasks.satartDate
      //           )
      //             .add(7, "days")
      //             .format("YYYY-MM-DD HH:mm:ss");
      //         } else {
      //           this.queryTwo.wcTimedTasks.executeTime =
      //             currentDay + " " + this.chatTimee[0];
      //         }
      //       } else {
      //         this.$message({
      //           message: "请选择定时执行时间！",
      //           type: "warning",
      //         });
      //         return;
      //       }
      //     }

      //     if (this.queryTwo.wcTimedTasks.executeCycle == 3) {
      //       if (
      //         this.chatTimee != null &&
      //         this.chatTimee != "" &&
      //         this.checkDay != null
      //       ) {
      //         var currentDay = this.checkDay;
      //         var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
      //         this.queryTwo.wcTimedTasks.satartDate =
      //           currentDay + " " + this.chatTimee[0];
      //         this.queryTwo.wcTimedTasks.endDate =
      //           currentDay + " " + this.chatTimee[1];
      //         const time1 = new Date(currentTime).getTime();
      //         const time2 = new Date(
      //           this.queryTwo.wcTimedTasks.satartDate
      //         ).getTime();
      //         this.queryTwo.wcTimedTasks.createTime = currentTime;
      //         if (time1 > time2) {
      //           const nextMonth = moment(time2).add(1, "months");
      //           this.queryTwo.wcTimedTasks.executeTime = this.getNextMonth(
      //             nextMonth,
      //             0
      //           );
      //         } else {
      //           this.queryTwo.wcTimedTasks.executeTime =
      //             currentDay + " " + this.chatTimee[0];
      //         }
      //       } else {
      //         this.$message({
      //           message: "请选择定时执行时间！",
      //           type: "warning",
      //         });
      //         return;
      //       }
      //     }
      //     if (this.queryTwo.wcTimedTasks.executeCycle == 4) {
      //       if (
      //         this.chatTimee != null &&
      //         this.chatTimee != "" &&
      //         this.checkDay != null
      //       ) {
      //         var currentDay = this.checkDay;
      //         var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
      //         this.queryTwo.wcTimedTasks.satartDate =
      //           currentDay + " " + this.chatTimee[0];
      //         this.queryTwo.wcTimedTasks.endDate =
      //           currentDay + " " + this.chatTimee[1];
      //         const time1 = new Date(currentTime).getTime();
      //         const time2 = new Date(
      //           this.queryTwo.wcTimedTasks.satartDate
      //         ).getTime();
      //         this.queryTwo.wcTimedTasks.createTime = currentTime;
      //         if (time1 > time2) {
      //           const nextMonth = moment(time2).add(1, "years");
      //           this.queryTwo.wcTimedTasks.executeTime = this.getNextMonth(
      //             nextMonth,
      //             1
      //           );
      //         } else {
      //           this.queryTwo.wcTimedTasks.executeTime =
      //             currentDay + " " + this.chatTimee[0];
      //         }
      //       } else {
      //         this.$message({
      //           message: "请选择定时执行时间！",
      //           type: "warning",
      //         });
      //         return;
      //       }
      //     }
      //   }
      //   if (
      //     this.queryTwo.wcTimedTasks.intervalTime == null ||
      //     this.queryTwo.wcTimedTasks.intervalTime == ""
      //   ) {
      //     this.$message({
      //       message: "请选择发送间隔！",
      //       type: "warning",
      //     });
      //     return;
      //   }
      //   if (
      //     this.queryTwo.wcTimedTasks.msgType == null ||
      //     this.queryTwo.wcTimedTasks.msgType == ""
      //   ) {
      //     this.$message({
      //       message: "请选择消息类型！",
      //       type: "warning",
      //     });
      //     return;
      //   }
      //   if (
      //     this.queryTwo.wcTaskDetailsList == null ||
      //     this.queryTwo.wcTaskDetailsList == ""
      //   ) {
      //     this.$message({
      //       message: "请输入/上传消息内容！",
      //       type: "warning",
      //     });
      //     return;
      //   }
      //   //console.log(this.queryTwo)
      // }
      if (this.active == 1) {
        if (this.ids == null || this.ids == "") {
          this.$message({
            message: "请选择好友！",
            type: "warning",
          });
          return;
        }
      } else if (this.active == 2) {
        if (this.msgContent != "" && this.msgContent != null) {
          this.msgInfo.push({
            contentType: "1",
            messageContent: this.msgContent,
          });
          this.msgType = "1";
          this.msgContent = "";
        }
        this.queryTwo.wcTaskDetailsList = this.msgInfo;
        if (
          this.queryTwo.wcTimedTasks.taskName == null ||
          this.queryTwo.wcTimedTasks.taskName == ""
        ) {
          this.$message({
            message: "请输入任务名称！",
            type: "warning",
          });
          return;
        }
        if (this.queryTwo.wcTimedTasks.executionType == 1) {
          var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
          this.queryTwo.wcTimedTasks.createTime = currentTime;
          this.queryTwo.wcTimedTasks.executeTime = currentTime;
          this.queryTwo.wcTimedTasks.satartDate = null;
          this.queryTwo.wcTimedTasks.endDate = null;
        } else {
          if (
            this.queryTwo.wcTimedTasks.executeCycle == null ||
            this.queryTwo.wcTimedTasks.executeCycle == ""
          ) {
            this.$message({
              message: "请选择定时类型！",
              type: "warning",
            });
            return;
          }
          if (this.queryTwo.wcTimedTasks.executeCycle == 1) {
            if (this.chatTimee != null && this.chatTimee != "") {
              var currentDay = moment().format("YYYY-MM-DD");
              var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
              this.queryTwo.wcTimedTasks.satartDate =
                currentDay + " " + this.chatTimee[0];
              this.queryTwo.wcTimedTasks.endDate =
                currentDay + " " + this.chatTimee[1];
              const time1 = moment(currentTime);
              const time2 = moment(this.queryTwo.wcTimedTasks.satartDate);
              this.queryTwo.wcTimedTasks.createTime = currentTime;
              if (time1 > time2) {
                this.queryTwo.wcTimedTasks.executeTime = moment(
                  this.queryTwo.wcTimedTasks.satartDate
                )
                  .add(1, "days")
                  .format("YYYY-MM-DD HH:mm:ss");
              } else {
                this.queryTwo.wcTimedTasks.executeTime =
                  this.queryTwo.wcTimedTasks.satartDate;
              }
            } else {
              this.$message({
                message: "请选择定时执行时间！",
                type: "warning",
              });
              return;
            }
          }
          if (this.queryTwo.wcTimedTasks.executeCycle == 2) {
            if (
              this.chatTimee != null &&
              this.chatTimee != "" &&
              this.weekIdx != null
            ) {
              var currentDay = this.getWeekDay(this.weekIdx);
              var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
              this.queryTwo.wcTimedTasks.satartDate =
                currentDay + this.chatTimee[0];
              this.queryTwo.wcTimedTasks.endDate =
                currentDay + this.chatTimee[1];
              const time1 = new Date(currentTime).getTime();
              const time2 = new Date(
                this.queryTwo.wcTimedTasks.satartDate
              ).getTime();
              this.queryTwo.wcTimedTasks.createTime = currentTime;
              if (time1 > time2) {
                this.queryTwo.wcTimedTasks.executeTime = moment(
                  this.queryTwo.wcTimedTasks.satartDate
                )
                  .add(7, "days")
                  .format("YYYY-MM-DD HH:mm:ss");
              } else {
                this.queryTwo.wcTimedTasks.executeTime =
                  currentDay + " " + this.chatTimee[0];
              }
            } else {
              this.$message({
                message: "请选择定时执行时间！",
                type: "warning",
              });
              return;
            }
          }

          if (this.queryTwo.wcTimedTasks.executeCycle == 3) {
            if (
              this.chatTimee != null &&
              this.chatTimee != "" &&
              this.checkDay != null
            ) {
              var currentDay = this.checkDay;
              var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
              this.queryTwo.wcTimedTasks.satartDate =
                currentDay + " " + this.chatTimee[0];
              this.queryTwo.wcTimedTasks.endDate =
                currentDay + " " + this.chatTimee[1];
              const time1 = new Date(currentTime).getTime();
              const time2 = new Date(
                this.queryTwo.wcTimedTasks.satartDate
              ).getTime();
              this.queryTwo.wcTimedTasks.createTime = currentTime;
              if (time1 > time2) {
                const nextMonth = moment(time2).add(1, "months");
                this.queryTwo.wcTimedTasks.executeTime = this.getNextMonth(
                  nextMonth,
                  0
                );
              } else {
                this.queryTwo.wcTimedTasks.executeTime =
                  currentDay + " " + this.chatTimee[0];
              }
            } else {
              this.$message({
                message: "请选择定时执行时间！",
                type: "warning",
              });
              return;
            }
          }
          if (this.queryTwo.wcTimedTasks.executeCycle == 4) {
            if (
              this.chatTimee != null &&
              this.chatTimee != "" &&
              this.checkDay != null
            ) {
              var currentDay = this.checkDay;
              var currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
              this.queryTwo.wcTimedTasks.satartDate =
                currentDay + " " + this.chatTimee[0];
              this.queryTwo.wcTimedTasks.endDate =
                currentDay + " " + this.chatTimee[1];
              const time1 = new Date(currentTime).getTime();
              const time2 = new Date(
                this.queryTwo.wcTimedTasks.satartDate
              ).getTime();
              this.queryTwo.wcTimedTasks.createTime = currentTime;
              if (time1 > time2) {
                const nextMonth = moment(time2).add(1, "years");
                this.queryTwo.wcTimedTasks.executeTime = this.getNextMonth(
                  nextMonth,
                  1
                );
              } else {
                this.queryTwo.wcTimedTasks.executeTime =
                  currentDay + " " + this.chatTimee[0];
              }
            } else {
              this.$message({
                message: "请选择定时执行时间！",
                type: "warning",
              });
              return;
            }
          }
        }
        if (
          this.queryTwo.wcTimedTasks.intervalTime == null ||
          this.queryTwo.wcTimedTasks.intervalTime == ""
        ) {
          this.$message({
            message: "请选择发送间隔！",
            type: "warning",
          });
          return;
        }
        if (
          this.queryTwo.wcTimedTasks.msgType == null ||
          this.queryTwo.wcTimedTasks.msgType == ""
        ) {
          this.$message({
            message: "请选择消息类型！",
            type: "warning",
          });
          return;
        }
        // if (
        //   this.queryTwo.wcTaskDetailsList == null ||
        //   this.queryTwo.wcTaskDetailsList == ""
        // ) {
        //   this.$message({
        //     message: "请输入/上传消息内容！",
        //     type: "warning",
        //   });
        //   return;
        // }
        //console.log(this.queryTwo)
      }
      this.active += 1;
    },
    getNextMonth(time, lx) {
      if (time.isValid()) {
        return moment(time).format("YYYY-MM-DD HH:mm:ss");
      } else {
        const nextMonth = moment(time).add(1, "years");
        if (lx == 0) {
          nextMonth = moment(time).add(1, "months");
        }
        this.getNextMonth(nextMonth, lx);
      }
    },
    addMsg() {
      if (this.msgType == "1") {
        if (this.msgContent == "" || this.msgContent == null) {
          this.$message({
            message: "请先填写内容或上传",
            type: "warning",
          });
          return;
        }
        this.msgInfo.push({ contentType: "1", messageContent: "", name: "" });
        var num = this.msgInfo.length;
        this.msgInfo[num - 1].contentType = this.msgType;
        this.msgInfo[num - 1].messageContent = this.msgContent;
        this.msgType = "1";
        this.msgContent = "";
      }
      //  else{
      //     this.$refs.upload.submit();
      //  }
      //console.log(this.msgInfo)
    },
    // 上传前loading加载
    handleBeforeUpload(file) {
      if (this.msgType == "2") {
        let isImg = false;
        if (this.fileType.length) {
          let fileExtension = "";
          if (file.name.lastIndexOf(".") > -1) {
            fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
          }
          isImg = this.fileType.some((type) => {
            if (file.type.indexOf(type) > -1) return true;
            if (fileExtension && fileExtension.indexOf(type) > -1) return true;
            return false;
          });
        } else {
          isImg = file.type.indexOf("image") > -1;
        }

        if (!isImg) {
          this.$modal.msgError(
            `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
          );
          return false;
        }
        if (this.fileSize) {
          const isLt = file.size / 1024 / 1024 < this.fileSize;
          if (!isLt) {
            this.$modal.msgError(`上传图片大小不能超过 ${this.fileSize} MB!`);
            return false;
          }
        }
        this.$modal.loading("正在上传图片，请稍候...");
      }
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      //console.log(response)
      this.$modal.closeLoading();
      this.msgInfo.push({
        contentType: this.msgType,
        messageContent: "",
        name: "",
      });
      var num = this.msgInfo.length;
      this.msgInfo[num - 1].contentType = this.msgType;
      this.msgInfo[num - 1].messageContent = response.url;
      this.msgInfo[num - 1].name = response.newFileName;
      this.msgType = "1";
      this.msgContent = "";
      this.isUploading = false;
      this.$refs.upload.clearFiles();
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 表单重置
    reset() {
      //console.log("清空")
      if (this.ids != "") {
        this.$refs.friend.$refs.friendTable.clearSelection();
      }
      this.ids = [];
      this.active = 1;
      this.selection = [];
      this.msgInfo = [];
      this.msgType = "1";
      this.msgContent = "";
      this.chatTimee = ["", ""];
      this.queryTwo = {
        wcFriendInfoList: [], //群发好友列表
        wcTaskDetailsList: [], //信息内容 contentType 0:其他 1:文字 2:图片 3:文件
        wcTimedTasks: {
          taskType: 2, //任务类型 0:添加好友任务 1：定时任务  2:群发任务)
          msgType: null, //信息类型: 0:天气 1:新闻 2:心情
          createTime: null,
          executionType: 1, //执行类型 1:立即执行, 2:定时执行
          executeTime: null, //执行时间
          executeCycle: null, //执行周期
          intervalTime: null, //执行间隔时间
          taskName: null, //任务名称
          satartDate: null, //开始执行时间
          endDate: null, //结束执行时间
        },
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.startExecuteTime = null;
      this.queryParams.endExecuteTime = null;
      if (this.chatTime != "" && this.chatTime != null) {
        this.queryParams.startExecuteTime = this.chatTime[0] + " 00:00:00";
        this.queryParams.endExecuteTime = this.chatTime[1] + " 23:59:59";
      }

      this.queryParams.startCreateTime = null;
      this.queryParams.endCreateTime = null;
      if (this.chatTimes != "" && this.chatTimes != null) {
        this.queryParams.startCreateTime = this.chatTimes[0] + " 00:00:00";
        this.queryParams.endCreateTime = this.chatTimes[1] + " 23:59:59";
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.chatTime = [];
      this.chatTimes = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        wcTimedTasks: {
          taskId: null, //任务id
          taskType: 2, //任务类型 (0:添加好友任务 1：定时任务  2:群发任务)
          msgType: null,
          executionType: 1, //执行类型不能为空
          executeCycle: null, //执行周期  业务字典（1：每天 2：每周 3：每月 4：每年）
          createBy: null, //创建人
        },
        finishState: this.state,
        startExecuteTime: null,
        endExecuteTime: null,
        startCreateTime: null,
        endCreateTime: null,
      };

      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增任务";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$modal
        .confirm("是否确认取消所选定时任务信息？")
        .then(function () {
          return updateWcTimedTasks(row.id);
        })
        .then(() => {
          this.getList();
          this.open = false;
          this.$modal.msgSuccess("取消成功");
        })
        .catch(() => {});
    },
    /** 提交按钮 */
    submitInfo() {
      // console.log(this.queryTwo);
      addWcTimedTasks(this.queryTwo).then((res) => {
        this.open = false;
        this.reset();
        this.$modal.msgSuccess(res.message);
        this.getList();
      });
    },
  },
};

/** js请求 调用 */

// 查询定时任务信息列表
export function listWcTimedTasks(query) {
  return request({
    url: "/arbit/wctimedTasks/getPage",
    method: "post",
    data: query,
  });
}
// 修改定时任务信息
export function updateWcTimedTasks(id) {
  return request({
    url: "/arbit/wctimedTasks/cancelTask/" + id,
    method: "POST",
  });
}
// 新增定时任务信息
export function addWcTimedTasks(data) {
  return request({
    url: "/arbit/wctimedTasks/addSendMsgByrichText",
    method: "post",
    data: data,
  });
}
// 查询助手招呼语设置列表
export function page(query) {
  return request({
    url: "/wcUserTerms/page",
    method: "get",
    params: query,
  });
}
export function getUseParams(id) {
  return request({
    url: "/arbit/wcvariable/queryWcVariableById/" + id,
    method: "get",
  });
}
</script>
<style lang="scss">
.my-autocomplete {
  width: 370px;
  li {
    line-height: normal;
    padding: 7px;

    .name {
      white-space: normal;
      overflow: auto;
      line-height: 30px;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
<style lang="scss">
.app-container {
  background-color: #f6f9fb;
}
.line-state {
  display: flex;
  width: 390px;
  border: 1px solid #d1e5ff;
  font-size: 14px;
  border-radius: 5px;
  background-color: #fff;
  .state-box {
    width: 130px;
    height: 35px;
    color: #8c8c8c;
    text-align: center;
    line-height: 35px;
  }
  .frist-border {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  .end-border {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .select {
    color: #fff;
    background-color: #288dfc;
  }
}
.add-upload {
  display: flex;
  width: 400px;
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
.btn-up {
  background-color: #fff;
  color: #0078fb;
  border-color: #0078fb;
  margin-top: 12px;
}
.msg-list {
  display: flex;
  flex-direction: column;
  border: 1px solid #dcdfe6;
  margin-bottom: 20px;
  line-height: 25px;
  padding: 5px;
}
.add-msg {
  display: flex;
  height: 35px;
  width: 400px;
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  margin-top: 20px;
}
.frominfo {
  display: flex;
  background-color: #fff;
  padding: 10px;
  padding-bottom: 0;
  margin-bottom: 20px;
  .from-item {
    display: flex;
    flex-wrap: wrap;
  }
  .from-Btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20%;
  }
}
.add-btn {
  background-color: #0078fb;
  color: #fff;
  border-color: #0078fb;
}
.btn-setup {
  background-color: #fb9d52;
  color: #fff;
  width: 50px;
}
.linebtn {
  display: flex;
  margin: -10px 0 10px 5px;
  height: 38px;
  .btn {
    width: 180px;
    text-align: center;
    line-height: 38px;
    font-size: 14px;
    color: #8c8c8c;
    margin-right: 10px;
    border: 1px solid #eaeff2;
    background-color: #fff;
    border-radius: 5px;
    .link-type {
      color: #8c8c8c;
    }
  }
  .select {
    background-color: #eaf6ff;
    border: 1px solid #288dfc;
    color: #288dfc;
    font-weight: 550;
  }
}
.dia-box {
  margin-top: -20px;
  padding: 0 20px 20px 20px;
  display: flex;
  flex-direction: column;
  .dia-box-search {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .select-all {
      border: 1px solid #dcdfe6;
      height: 36px;
      line-height: 36px;
      padding: 0 10px;
      border-radius: 4px;
    }
  }
  .dia-box-time {
    display: flex;
    flex-direction: column;
  }
  .dia-box-lable {
    width: 90%;
    border-radius: 5px;
    border: 1px solid #eee;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin-bottom: 20px;
    .lable-box {
      padding: 0 5px;
      height: 20px;
      line-height: 20px;
      margin-right: 10px;
      border: 1px solid #dcdcdc;
      background-color: #ebf4ff;
      font-size: 12px;
      border-radius: 3px;
    }
    .select {
      color: #fff;
      background-color: #4095e5;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
  }
  .addbtn {
    width: 130px;
    border-radius: 5px;
    background-color: #0078fb;
    border-color: #0078fb;
    font-size: 15px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #fff;
    margin-bottom: 15px;
  }
}
.theSteps {
  width: 90%;
  margin: 0 5%;
  font-size: 14px;
  /* 进行中状态：圈线 */
  .el-step__head.is-process {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }
  .el-step__title.is-process {
    color: #c0c4cc;
    font-size: 14px;
  }
  /* 完成状态：圈线 */
  .el-step__head.is-success {
    color: #0076f6;
    border-color: #0076f6;
  }
  /* 完成状态：圈内 */
  .el-step__head.is-success > .el-step__icon {
    background: #ecf5ff;
    color: #0076f6;
  }
  /* 完成状态：title（文字） */
  .el-step__title.is-success {
    color: #0076f6;
    font-size: 14px;
  }
  .el-step__title {
    font-size: 14px;
  }
}
</style>
